<template>
  <div class="main">
    <div class="order-content">
      <div class="order" v-for="(item,index) in data" :key="index">
        <img :src="item.img"/>
        <div class="title">{{ item.title }}</div>
        <div class="time">{{ item.time }}</div>
        <div class="right">
          <div class="right-content">
            <div class="right-price">&yen;{{ item.price }}</div>
            <div class="right-num">x{{ item.num }}</div>
            <div class="right-status">{{ item.status=='COMPLETED'?'已完成':'待支付' }}</div>
          </div>
          <div class="btn">
            <el-button plain type="danger" size="mini" @click="del(item)">删除</el-button>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { del_order, user_order } from '@/api/order_api';

export default{
  data(){
    return{
      data:[]
    }
  },
  methods:{
    async del(item){
      const {data:res} = await del_order({id:item.id,user_id:item.user_id,good_id:item.good_id})
      
      this.$message({
        type:res.code==200?'success':'error',
        message:res.msg
      })
      res.code==200?this.get_list():''
    },
    async get_list(){
      const id = JSON.parse(localStorage.getItem('user')).user_id
      const {data:res} = await user_order(id)
      this.data = res.data.map(k=>{
        k.img = this.revert(k.img)
        return k
      })
    },
    revert(data){
      var parts = data.split(';base64,'),
      contentType = parts[0].split(':')[1],
      raw = window.atob(parts[1]),
      length = raw.length,
      arr = new Uint8Array(length);
      for (var i = 0; i < length; i++) {
          arr[i] = raw.charCodeAt(i);
      }
      var blob = new Blob([arr], { type: contentType });
      return URL.createObjectURL(blob);
    },
  },
   created(){
    this.get_list() 
  }
}
</script>
<style scoped lang="scss">
  .main{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    background-color: #f2f2f2;
    .order-content{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      .order{
        height: 15%;
        width: 95%;
        display: flex;
        margin: 20px;
        border-radius: 20px;
        background-color: #fff;
        img{
          margin: 20px;
          border-radius: 10px;
        }
        .title{
          display: flex;
          font-weight: bold;
          font-size: 20px;
          width: 40%;
          margin: 10px;
          line-height: 40px;
        }
        .time{
          display: flex;
          align-items: end;
          margin-bottom: 10px;
          color:#d2d2d2
        }
        .right{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .right-content{
            display: flex;
            align-items: center;
            .right-price{
              color: red;
              margin-left: 10%;
            }
            .right-status{
              color: green;
              font-weight: bold;
              margin-left: 30%;
            }
          }
          .btn{
            display: flex;
            justify-content: flex-end;
            margin-top: 10%;
            margin-right: 22%;
          }
        }
      }

    }
  }
</style>